<template>
    <div id="app">
        <mt-swipe :auto="0">
            <mt-swipe-item v-for="(broadcastItem, index) in broadcastItems" :key="index">
                <img @click="clickBroadCastHandler(broadcastItem)" class="broadcast-item-img" :src="broadcastItem.imageUrl">
            </mt-swipe-item>
        </mt-swipe>
        <div class="block-title">
            <span>热门分类</span>
        </div>
        <div class="category clearfix">
            <category-item @click="goToProductPage(categoryItem)" v-for="(categoryItem, index) in categoryItems" :categoryItem="categoryItem" :key="index">
                
            </category-item>
        </div>
        <div class="block-title">
            <span>热销商品</span>
        </div>
        <div class="goods-container clearfix">
            <div class="goods-item-wrap" v-for="(goodsItem, index) in goodsItems" :key="index">
                <div class="goods-item-padding">
                    <goods-item @goodsItemDetail="openCart" @click="clickGoodsItemHandler(goodsItem)" :goodsItem="goodsItem"></goods-item>
                </div>
            </div>
        </div>
        <product-picker v-if="productPickerModal" v-model="productPickerModal" :goods-item-detail="goodsItemDetail"></product-picker>
        <tabs-bar :activeTab="0"></tabs-bar>
    </div>
</template>

<script>
import categoryItem from '@components/category-item'
import { listBroadcast, listCategory, listProduct } from './api'
import utils from '@utils'
export default {
    name: 'app',
    components: {
        categoryItem
    },
    mixins: [ utils.MixinBase ],
    data() {
        return {
            broadcastItems: [],
            categoryItems: [],
            goodsItems: [],
            productPickerModal: false,
            goodsItemDetail: null
        }
    },
    mounted() {
        this.$indicator.open({
            spinnerType: 'fading-circle',
            text: '加载中...'
        });
        this.wechatInit().then(()=> {
            this.init();
        }, ()=> {
            this.init();
        });
    },
    methods: {
        initWechatConfig() {
            this.wechatConfigInit().then(() => {
                var shareOptions = {
                    shareTitle: "坚冰商务",
                    shareDesc: "亲！还在等什么，快来看看！",
                    shareUrl: utils.createAuthLink("index.html"),
                    sharePic: this.broadcastItems[0].image
                }

                utils.shareHandler({
                    type: 'timeLine',
                    ...shareOptions
                })

                utils.shareHandler({
                    type: 'appMessage',
                    ...shareOptions
                })
            })
        },
        init: function() {
            listBroadcast().then(data => {
                this.$indicator.close();
                this.broadcastItems = data;
                this.initWechatConfig();
            });
            listCategory().then(data => {
                this.categoryItems = data;
            });
            listProduct().then(data => {
                this.goodsItems = data;
            });
        },
        clickGoodsItemHandler(goodsItem) {
            utils.goToPage("product_detail.html?id="+goodsItem.id);
        },
        clickBroadCastHandler(broadcastItem) {
            if(broadcastItem.jumpType == 'none') {
                return
            } else if(broadcastItem.jumpType == 'product') {
                utils.goToPage("product_detail.html?id="+broadcastItem.productId);
            } else if(broadcastItem.jumpType == 'link') {
                if(broadcastItem.webJumpUrl) {
                    utils.goToPage(broadcastItem.webJumpUrl);
                }
            }
        },
        goToProductPage(categoryItem) {
            utils.goToPage("product.html?id="+categoryItem.id);
        },
        openCart(goodsItem) {
            this.goodsItemDetail = goodsItem;
            this.productPickerModal = true;
        }
    }
}
</script>

<style>
.broadcast-item-img {
    display: inline-block;
    height: 300px;
    width: 100%;
}
.mint-swipe {
    text-align: center;
}
.mint-swipe .mint-swipe-items-wrap {
    height: 300px;
}
.category {
    border-top: 1px solid #efefef;
}


.block-title {
    padding: 14px 0;
    text-align: right;
}
.block-title span {
    color: #666;
    padding-right: 20px;
    font-size: 10px;
}
.goods-container {
    padding: 0 3px;
}
.goods-item-wrap {
    float: left;
    width: 50%;
}
.goods-item-padding {
    padding: 0 3px;
}

</style>
